<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>社团</title>

    <script src="/ss/static/js/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/ss/static/layui/layui.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/index.js" type="text/javascript"></script>
    <script src="/ss/static/layui/lay/modules/layer.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/sliders.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/html5.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/freezeheader.js" type="text/javascript"></script>
    <script src="/ss/static/js/custom.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/ss/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/ss/static/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" href="/ss/static/css/global.css"/>
</head>

<body>
<div th:replace="template.html::header"></div>

<div class="layui-container container">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md8">
            <div class="article-main">
                <h2>
                    社团列表
                </h2>
                <div class="article-list" th:each="association : ${associations}">
                    <figure>
                        <a th:href="'association?aid=' + ${association.getAid()}">
                            <img th:src="${association.getFace()}">
                        </a>
                    </figure>
                    <ul>
                        <h3>
                            <a th:text="${association.getName()}"></a>
                        </h3>
                        <p th:text="${association.getDesc()}"></p>
                        <p class="autor">
                            <span>
                                <svg style="vertical-align: middle" width="15"
                                     height="15" viewBox="0 0 48 48" fill="none"
                                     xmlns="http://www.w3.org/2000/svg"><path
                                        d="M42.1691 29.2451L29.2631 42.1511C28.5879 42.8271 27.6716 43.2069 26.7161 43.2069C25.7606 43.2069 24.8444 42.8271 24.1691 42.1511L8 26V8H26L42.1691 24.1691C43.5649 25.5732 43.5649 27.841 42.1691 29.2451Z"
                                        fill="none" stroke="#333" stroke-width="4"
                                        stroke-linejoin="round"/><path
                                        fill-rule="evenodd" clip-rule="evenodd"
                                        d="M18.5 21C19.8807 21 21 19.8807 21 18.5C21 17.1193 19.8807 16 18.5 16C17.1193 16 16 17.1193 16 18.5C16 19.8807 17.1193 21 18.5 21Z"
                                        fill="#333"/></svg>
                                <a th:text="${association.getTag()}"></a>
                            </span>
                            <span th:if="${!user.getRole().equals('master') && !user.getRole().equals('admin') && !joinList.get(associationStat.index)}">
                                <svg style="vertical-align: middle" width="15" height="15" viewBox="0 0 48 48"
                                     fill="none"
                                     xmlns="http://www.w3.org/2000/svg"><path d="M43 5L29.7 43L22.1 25.9L5 18.3L43 5Z"
                                                                              stroke="#333" stroke-width="4"
                                                                              stroke-linejoin="round"/><path
                                        d="M43.0001 5L22.1001 25.9" stroke="#333" stroke-width="4"
                                        stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <a th:onclick="'join(' + ${user.getUid()} + ', ' + ${association.getAid()} + ', ' + ${association.getUid()} +')'"
                                   style="cursor: pointer">申请加入</a>
                            </span>
                            <span th:if="${joinList.get(associationStat.index)}">
                                <svg style="vertical-align: middle" width="15" height="15"
                                     viewBox="0 0 48 48"
                                     fill="none" xmlns="http://www.w3.org/2000/svg"><path
                                        d="M23.9917 6H6V42H24"
                                        stroke="#333" stroke-width="4"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"/><path
                                        d="M33 33L42 24L33 15" stroke="#333" stroke-width="4"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"/><path d="M16 23.9917H42"
                                                                       stroke="#333"
                                                                       stroke-width="4"
                                                                       stroke-linecap="round"
                                                                       stroke-linejoin="round"/></svg>
                                <a th:onclick="'quit(' + ${user.getUid()} + ', ' + ${association.getAid()} + ')'"
                                   style="cursor: pointer">申请退出</a>
                            </span>
                            <span th:if="${user.getRole().equals('admin')}">
                                <svg style="vertical-align: middle" width="15" height="15"
                                     viewBox="0 0 48 48" fill="none"
                                     xmlns="http://www.w3.org/2000/svg"><path d="M7 42H43"
                                                                              stroke="#333"
                                                                              stroke-width="4"
                                                                              stroke-linecap="round"
                                                                              stroke-linejoin="round"/><path
                                        d="M11 26.7199V34H18.3172L39 13.3081L31.6951 6L11 26.7199Z" fill="none"
                                        stroke="#333"
                                        stroke-width="4" stroke-linejoin="round"/></svg>
                                <a style="cursor: pointer"
                                   th:onclick="'openPanel('+${association.getAid()}+', \'association\')'">编辑</a>
                            </span>
                            <span th:if="${user.getRole().equals('admin')}">
                                <svg width="15" height="15" viewBox="0 0 48 48" fill="none"
                                     xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;"><path
                                        d="M9 10V44H39V10H9Z" fill="none" stroke="#333" stroke-width="4"
                                        stroke-linejoin="round" style="
"></path><path d="M20 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path
                                        d="M28 20V33" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M4 10H44" stroke="#333"
                                                                             stroke-width="4"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#333"
                                        stroke-width="4"
                                        stroke-linejoin="round"></path></svg>
                                <a style="cursor: pointer"
                                   th:onclick="'deleteEntity('+${association.getAid()}+', \'association\')'">删除社团</a>
                            </span>
                        </p>
                    </ul>
                </div>
            </div>
            <!--分页-->
            <div id="page"></div>
        </div>
        <div class="layui-col-md4">
            <form class="layui-form" method="post" action="index">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width:76%;">
                        <input type="text" name="type" value="name" style="display: none"/>
                        <input type="text" name="keyword" lay-verify="required" placeholder="请输入关键字"
                               class="layui-input">
                    </div>
                    <button class="layui-btn" lay-filter="*" lay-submit>搜索</button>
                </div>
            </form>
            <div class="cloud">
                <h3>标签</h3>
                <ul>
                    <li style="cursor: pointer" th:each="tag : ${tags}">
                        <form method="post" action="index">
                            <input style="color: white;background: transparent;border-width: 0;height: 24px;cursor: pointer;"
                                   type="submit" th:value="${tag}">
                            <input style="display: none" name="type" value="tag"/>
                            <input style="display: none" name="keyword" th:value="${tag}"/>
                        </form>
                    </li>
                </ul>
            </div>
            <div th:if="${user.getRole().equals('student')}" class="links">
                <h3><span>[<a style="cursor: pointer"
                              onclick="openCreateAssociationPanel('create-association')">申请社团</a>]</span>社团创建</h3>
                只有普通学生才可以申请社团
            </div>
        </div>
    </div>

    <div id='create-association-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">申请社团</h2>
            <div style="display: flex;margin-top: 20px;">
                <input type="number" style="display: none" th:value="${user.getUid()}" id="create-association-uid">
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团名:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="create-association-name"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团标签:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="create-association-tag"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团描述:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="create-association-desc"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团logo图片网址:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="create-association-face"/>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px"
                    id="create-association-button">申请
            </button>
        </div>
    </div>

    <div id='association-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">修改社团信息</h2>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社长id:&nbsp;</p>
                <input type="number" class="layui-input" style="align-self: center;width: 200px" id="association-uid">
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团名:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="association-name"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团标签:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="association-tag"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团描述:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="association-desc"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团logo图片网址:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="association-face"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团创建日期:&nbsp;</p>
                <input type="date" class="layui-input" style="align-self: center;width: 200px" id="association-date"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团会费:&nbsp;</p>
                <input type="number" min="0" class="layui-input" style="align-self: center;width: 200px"
                       id="association-money"/>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px"
                    id="association-button">修改
            </button>
        </div>
    </div>
</div>

<div th:replace="template.html::footer"></div>
</body>
<script type="text/javascript">
    function join(uid, aid, master) {
        var member = {}
        member['uid'] = uid
        member['aid'] = aid

        var apply = {}
        apply['sender'] = uid
        apply['receiver'] = master
        apply['date'] = new Date()
        apply['state'] = 'pending'
        apply['type'] = 'member'
        apply['content'] = JSON.stringify(member)
        $.ajax({
            url: 'api/apply',
            type: 'post',
            data: JSON.stringify(apply),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                if (result['success']) location.reload()
                else alert('申请失败')
            }
        })
    }

    function quit(uid, aid) {
        var member = {}
        member['uid'] = uid
        member['aid'] = aid
        $.ajax({
            url: 'api/member',
            type: 'delete',
            data: JSON.stringify(member),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                if (result['success']) location.reload()
                else alert('退出社团失败')
            }
        })
    }

    function openCreateAssociationPanel(target) {
        document.getElementById(target + '-panel').style.display = 'flex'
        document.getElementById(target + '-button').onclick = () => {
            var apply = {}
            var association = {
                'uid': '', 'name': '', 'tag': '', 'desc': '', 'face': '', 'date': new Date(), 'money': 0
            }
            for (var x in association) {
                var element = document.getElementById(target + '-' + x.toString())
                if (element !== null) {
                    if (element.type === 'number') association[x] = parseInt(element.value)
                    else association[x] = element.value
                }
            }
            apply['sender'] = association['uid']
            apply['date'] = new Date()
            apply['state'] = 'pending'
            apply['type'] = 'association'
            apply['content'] = JSON.stringify(association)
            $.ajax({
                url: 'api/apply',
                type: 'post',
                data: JSON.stringify(apply),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (result) {
                    if (result['success']) location.reload()
                    else alert('申请失败')
                }
            })
        }
        window.addEventListener('mousedown', (event) => {
            if (event.target.id === target + '-panel')
                event.target.style.display = 'none'
        })
    }
</script>
</html>
